import React, { useCallback, useState } from 'react';
import UseCallBackView from './usecallback/UseCallBackView';

const App = () => {
  let [count, setCount] = useState(0)
  let [age, setUser] = useState(0)
  // 如果依赖项目改变了，就返回一个新函数。如果没有改变。getUserInfo引用的是useCallback()缓存的函数。
  const getUserInfo = useCallback(() => {
    console.log("正在获取用户信息")
  }, [age])

  // 当子组件使用memo()高阶组件检查Props的变化时，如果props有callback函数，这个函数要使用useCallback()这个hooks来缓存函数，减少子组件的重新渲染， 提升react的性能。
  // const getUserInfo = () => {
  //   console.log("正在获取用户信息")
  // }
  return (
    <div>
      <h1>App 根组件---count: {count}</h1>
      <h1>App 根组件---Age: {age}</h1>
      <div>
        <button type="button" onClick={() => {
          setCount(count + 1)
        }}>setCount</button>
        <button type="button" onClick={() => {
          setUser(age + 1)
        }}>setUser</button>
      </div>

      <UseCallBackView getUserInfo={getUserInfo}></UseCallBackView>
    </div>
  );
}

export default App;
